<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>HTML Image Slider</title>
    <style>
      * { padding: 0; margin: 0; }
      #window {overflow: auto; overflow-y: hidden; background-color: #000; -ms-overflow-y: hidden;height: 100%;}
      .height100 {height: 100%;}
      .canvas {height: 100% ;padding:18px;}
      .list-img { width:90px; height: 70px; margin: 0px 8px; border: 5px solid #000;}
      .list-img:hover { border: 5px solid #556; }
      .button {
        position: absolute; 
        width: 15px;
        height: 20px;
        margin: 0;
        border: 0;
        padding: 0;
        z-index: 100;        
        outline: none;        
      }
      .left-button { 
        left: 5px;
        background: url(img/arrows.gif) no-repeat;
        background-position: -15px 0px;
      }
      .right-button {
        right: 5px;
        background: url(img/arrows.gif) no-repeat;      
        background-position: -30px 0px;
      }    
      .left-button-hover {
        background-position: 0px 0px;
      }      
      .right-button-hover {
        background-position: -45px 0px;
      }      
      .side-edge {                 
        display: block; 
        position: absolute;        
        top: 0px;
        width: 28px;
        background-color: #444;        
        opacity: 0.6;
        z-index: 10;        
        outline: none;        
      }      
      .side-edge.left-edge {
        left: 0px;
      }
      .side-edge.right-edge {
        right: 0px;
      }                
     .side-edge-hover {
        opacity: 0.9;
      }
    </style>
    <script src="http://localhost:9810/compile?id=imageslider"></script>   
  </head>  
  <body onload="main();">
  <center>
    <div id="slider"></div>
  </center>
</body>
</html>
